<template>
	<view class="container" :style="{'height': boxHeight}">
		<view class="search_bar">
			<uni-search-bar :placeholder="placeholder" @confirm="handleSearch" v-model="searchForm.keywords"
				@cancel="handleCancel" @clear="handleCancel" style="height: 100%;">
			</uni-search-bar>
		</view>
		<view class="total_box" v-if="showTotal"> 共计 <text class="assist_gold">{{ data.total }}</text> {{unit}} </view>
		<scroll-view class="scroll_view" scroll-y lower-threshold="50" :refresher-enabled="true"
			:refresher-triggered="data.isRefreshing" @refresherrefresh="onRefresh" @scrolltolower="loadMore">
			<slot name="list"></slot>
			<uni-load-more :status="data.loadStatus" :content-text="{
        contentdown: '加载更多',
        contentrefresh: '加载中...',
        contentnomore: '已经到底了'
      }"></uni-load-more>
		</scroll-view>
	</view>
</template>

<script setup lang="ts">
	import { withDefaults, ref, reactive, onMounted } from 'vue'
	import { loginWithThirdToken, getCustomerList } from '../service/apis/user'
	// 定义 Props 类型
	interface Props {
		placeholder ?: string; // 输入框提示信息
		searchKey ?: string; // 搜索关键字字段名称
		other ?: object; // 其他参数
		searchApi ?: Function; // 请求API
		showTotal ?: boolean; // 是否展示总条数
		unit ?: string; // 总数单位
		boxHeight ?: string; // 列表高度
	}
	// 设置默认 Props
	const props = withDefaults(defineProps<Props>(), {
		placeholder: '搜索关键字',
		searchKey: 'keywords',
		other: () => { return {} },
		showTotal: false,
		unit: '个',
		boxHeight: uni.getWindowInfo().windowHeight + 'px',
		searchApi: getCustomerList
	});

	const emit = defineEmits(['update'])
	const data = reactive({
		list: [],
		total: 0,
		loadStatus: 'more',
		isRefreshing: false,
		ifStop: false
	})
	const searchForm = reactive({
		keywords: "",
		pageNum: 1,
		pageSize: 20
	})
	// 查询列表
	const getList = () => {
		console.log(searchForm)
		uni.showLoading({
			title: '处理中...',
			mask: true
		})
		const params = Object.assign({
			pageNum: searchForm.pageNum,
			pageSize: searchForm.pageSize,
			[props.searchKey]: searchForm.keywords
		}, props.other) 
		props.searchApi(searchForm).then(res => {
			uni.hideLoading()
			const {
				list,
				isLastPage,
				total
			} = res.data
			data.list = data.list.concat(list)
			data.isRefreshing = false
			data.total = total
			data.ifStop = isLastPage || (total <= searchForm.pageNum * searchForm.pageSize)
			data.loadStatus = data.ifStop ? 'noMore' : 'more'
			emit('update', data.list)
		}).catch(() => {
			uni.hideLoading()
		})
	}
	// 搜索
	const handleSearch = (e = {
		value: String
	}) => {
		searchForm.pageNum = 1
		data.list = []
		data.ifStop = false
		data.loadStatus = 'more'
		getList()
	}
	// 输入取消
	const handleCancel = () => {
		searchForm.keywords = ''
		searchForm.pageNum = 1
		data.list = []
		data.ifStop = false
		data.loadStatus = 'more'
		getList()
	}
	// 下拉刷新
	const onRefresh = () => {
		data.isRefreshing = true
		searchForm.keywords = ''
		handleSearch()
	}
	// 上拉加载
	const loadMore = () => {
		if (data.loadStatus !== 'more' || data.isRefreshing) return;
		data.loadStatus = 'loading';
		if (!data.ifStop) {
			searchForm.pageNum = searchForm.pageNum + 1
			getList()
		}
	}
	defineExpose({
		getList,
		loadMore
	})
</script>

<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		height: 600px;
	}

	.total_box {
		text-align: right;
		padding: 5rpx 30rpx;
		font-size: 26rpx;
	}

	.search_bar {
		padding: 0 10rpx;
		background-color: #fff;
		position: sticky;
		top: 0;
		z-index: 9;
	}

	.scroll_view {
		flex: 1;
		overflow: hidden;
		background-color: #f2f3f5;
	}
</style>